<template>
    <div class="allcartoon">
            <van-loading class="loading" v-show="IsLongding===false" type="spinner" size="24px">加载中...</van-loading>
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
            v-show="IsLongding === true"
        />
        <div class="allcartoon-ctx" v-show="IsLongding === true">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :immediate-check="false"
            >
            <div class="container" @click="gotoCartoon(item)" v-for="(item,index) in allData" :key="index">
                <div class="container-img">
                    <img v-lazy="item.vertical_cover" alt="">
                </div>
                <div class="container-title">
                    <div class="top auto-text">{{item.title}}</div>
                    <div class="center auto-text">{{item.author_name}}</div>
                    <div class="bottom">更新至{{item.total}}话</div>
                </div>
            </div>
            </van-list>
        </div>
    </div>
</template>

<script>
    export default {
        name:"AllCartoon",
        data(){
            return{
                pageNum:1,
                pageSize:15,
                id:'',
                allData:[],
                loading: false,
                finished: false,
                // 加载
                IsLongding: false,
            }
        },
        created(){

            this.id = this.$route.query.id;
            this.getData(this.id)
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
            },
            onLoad(){
                this.pageNum++;
                this.pageSize+=15;
                this.getData(this.id)

            },
            getData(){
                this.axios({
                    url:'GetClassPageSixComics',
                    params:{
                        id:this.id,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        isAll:0,
                    }
                }).then(result=>{
                    this.loading =false;
                if (result.status === 200) {
                    this.IsLongding = true;
                    let name = ''
                    if(result.data.data.roll_six_comics.length === 0){
                        this.finished = true;
                    }
                    this.allData.push(...result.data.data.roll_six_comics);
                    for(let i = 0 ; i < this.allData.length;i++){
                            if(this.allData[i].author_name.length>=2){
                                for(let j = 0 ; j < this.allData[i].author_name.length;j++){
                                    name += this.allData[i].author_name[j] + " "
                                }
                            }else{
                                name = this.allData[i].author_name[0]
                            }
                            this.allData[i].author_name = name;
                    }
                }
                
                })
            },

            gotoCartoon(item){
                
                this.$router.push({name:"CartoonContainer",query:{id:item.comic_id}})
            }
        }
    }
</script>

<style lang="less" scoped>
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.allcartoon-ctx{
    padding: 10px;
    height: calc(100vh - 46px);
    overflow-y: auto;
    .container{
        width: 100%;
        display: flex;
        margin-bottom: 10px;
        .container-img{
            height: 150px;
            border-radius: 5px;
            overflow: hidden;
            > img {
                height: 100%;
                display: block;
            }
        }
        .container-title{
            flex: 1;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .center{
                width: 230px;
            }
            .top{
                width: 230px;
            }
        }
    }
}
</style>